<template>
    <div class="recruitmentManagement">
        <van-sticky>
            <van-nav-bar title="借支信息" left-arrow @click-left="$router.push('/mine')">
                <template #right>
                    <van-icon style="margin-right: 20px;" name="search" size="20"
                        @click="searchBoxShow = !searchBoxShow; toClearKeyWord(!!searchParams.keyword)" />
                    <van-icon name="ellipsis" size="18" @click="showOverlay = true" />
                </template>
            </van-nav-bar>

            <van-search v-show="searchBoxShow" v-model="searchParams.keyword" placeholder="请输入企业名、报名人姓名、职位名搜索"
                show-action shape="round" @search="onSearch" @clear="toClearKeyWord">
                <div slot="action" @click="onSearch">搜索</div>
            </van-search>
        </van-sticky>

        <van-overlay :show="showOverlay" @click="showOverlay = false" class-name="over_layer">
            <van-cell-group class="layer">
                <van-cell @click="goWorkInfo(item)" v-for="(item, index) in navList" :key="index" :value="item.text"
                    :icon="item.icon" />
            </van-cell-group>
        </van-overlay>

        <com-filter-menu :rightOptionObj="rightOptionObj" :rightOption="rightOption"
            :rightValue="searchParams.searchType" @getFilterMenuValue="toGetFilterMenuValue_recruitmentManagement">
        </com-filter-menu>

        <div class="jobArr">
            <job-item-for-recruit v-for="(item, index) in needObj" :key="index" :advaceInfoType="1" :jobItem="item"
                :keyWord="'recruitmentManagement'" :titleName="titleName" :searchNameType="searchNameType"
                :searchType="1">
            </job-item-for-recruit>
            <van-pagination v-show="total > 0" style="margin: 10px 0" v-model="searchParams.pageIndex"
                :total-items="total" :items-per-page="searchParams.pageSize" @change="handlePaginationChange">
                <template #prev-text>
                    <van-icon name="arrow-left" />
                </template>
                <template #next-text>
                    <van-icon name="arrow" />
                </template>
                <template #page="{ text }">{{ text }}</template>
            </van-pagination>
        </div>

        <!-- 底部栏 -->
        <com-my-company-tar-bar></com-my-company-tar-bar>
    </div>
</template>

<script>
import jobItemForRecruit from './common/jobItemForRecruit'
import comMyCompanyTarBar from '../../../components/comMyCompanyTarbar'
import comFilterMenu from '../../../components/comFilterMenu'
import {obj} from '../../../constants/comUtils'
import {GoWorkInfo} from '../../../utils/recruitToUrl'

import quickMenu from './common/quickMenu'

import {navList} from './common/comConstant'
import {Toast} from 'vant'

const rightOptionObj = {
  in_application: '申请中',
  lend: '借支',
  dont_lend: '不借支'
}
const rightOption = [
  {text: '申请中', value: 'in_application'},
  {text: '借支', value: 'lend'},
  {text: '不借支', value: 'dont_lend'}
]

export default {
  name: 'advaceInfo',
  components: {
    quickMenu,
    jobItemForRecruit,
    comFilterMenu,
    comMyCompanyTarBar
  },
  data() {
    return {
      total: 0,
      rightValue: 'in_application',
      titleName: '申请中',
      searchNameType: 'in_application',
      rightOption,
      rightOptionObj,
      showOverlay: false,
      navList,
      needObj: obj,
      needObjTotal: '',

      // 检索参数
      searchParams: {
        pageIndex: 1,
        pageSize: 10,
        keyword: '',
        searchType: 'in_application'
      },

      searchBoxShow: false,

      icons: ['fa fa-github', 'fa fa-comment', 'fa fa-code', 'fa fa-envelope'],
      list: [{isLink: false}, {isLink: true, url: '/mime'}, {isLink: true, url: '/'}, {isLink: false}]
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const comMesRes = await this.$api.myCompany.reqGetMyCompanyAdvanceInfo(this.searchParams) //有参数

      if (comMesRes.code === 200) {
        this.needObj = comMesRes.data.items
        this.total = comMesRes.data.count
      }
    },
    handlePaginationChange(pageIndex) {
      this.searchParams.pageIndex = pageIndex
      this.getData()
    },
    goNeedPage_recruitStaff(val) {
      const keyWord = 'recruitStaff'
      if (val === 'search') {
        this.$router.push({
          path: `/searchRecords/${keyWord}`
        })
      }
    },
    //右上角---跳转页面
    goWorkInfo(data) {
      GoWorkInfo(data)
    },
    selected($event) {
      console.log('当前点击', $event.item)
    },
    toGetFilterMenuValue_recruitmentManagement(val) {
      this.titleName = this.rightOptionObj[val]
      this.searchNameType = val
      this.searchParams.pageIndex = 1
      Object.assign(this.searchParams, {
        searchType: val
      })

      this.getData()
    },

    onSearch() {
      this.searchParams.pageIndex = 1
      if (this.searchParams.keyword.trim()) {
        this.getData()
      } else {
        Toast('请先输入！')
      }
    },

    toClearKeyWord(isQuery = true) {
      if (!isQuery) {
        return null
      }
      this.searchParams.keyword = ''
      this.searchParams.pageIndex = 1
      this.$nextTick(() => {
        this.getData()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.recruitmentManagement {
  width: 100%;
  min-height: 100vh;
  .over_layer {
    margin-top: 46px;
    height: 100%;
    .layer {
      width: 42%;
      font-size: 14px;
      position: absolute;
      right: 0;
      z-index: 2;
    }
  }
  /deep/ .quick_links {
    .nut-fixednav.active .fixed-list {
      right: 0;
    }
    .quick_links_detail {
      .fixed-list {
        right: -110%;
        li {
          min-width: 1.56rem;
          img {
            /*display: none;*/
          }
          span {
            /*border: 1px solid blue;*/
          }
        }
      }
    }
  }
}
</style>
